<style scoped>
.item {
  margin: 10px;
  background-color: #fff;
  border-bottom: 1px dashed var(--hui);
}
.item > div {
  font-size: 14px;
  padding: 10px 16px;
}
.item > .top > .status > .immediately {
  padding: 5px 10px;
  background-color: #ff9500;
  color: #fff;
}
.item > .top > .status > .immediately2 {
  padding: 5px 10px;
  background-color: #ffc300;
  color: red;
}
.item > .top > .status > .news {
  display: initial-block;
  margin: 0 10px;
  padding: 2px;
  border-radius: 4px;
  color: #fff;
}
.item > .top > .status > .news.xin {
  background-color: #ff1e1e;
}
.item > .top > .status > .news.yun {
  background-color: #9a9110;
}
.item > .top > .status > .news.jin {
  background-color: #38739e;
}
.item > .top > .status > .news.wc {
  background-color: #00b60f;
}
.item > .top > .status > .news.qx {
  background-color: #c00000;
}
.item > .top > .status > .await {
  padding: 2px;
  background-color: #ff9820;
  border-radius: 4px;
  color: #fff;
}
.item > .money > .m {
  color: #ff6600;
  font-size: 16px;
}
.item > .money > .details {
  color: #ccc;
}
</style>
<template>
  <div class="item" @click="coclick">
    <div class="top flex">
      <div class="status">
        <span v-if="msg.status.st_1 == 0" class="immediately">即时</span>
        <span v-if="msg.status.st_1 == 1" class="immediately2">预约</span>
        <span v-if="msg.status.st_2 == 0" class="news xin">新</span>
        <span v-if="msg.status.st_2 == 1" class="news yun">待运</span>
        <span v-if="msg.status.st_2 == 2" class="news jin">进行中</span>
        <span v-if="msg.status.st_2 == 3" class="news wc">已完成</span>
        <span v-if="msg.status.st_2 == 4" class="news qx">已取消</span>
        <span v-if="msg.status.st_3 == 0" class="await">待抢</span>
      </div>
      <div class="time">{{ msg.status.time }}</div>
    </div>
    <div class="journey_msg flex">
      <span class="journey"
        >（{{
          msg.journey_msg.car == 0
            ? "小面包车"
            : msg.journey_msg.car == 1
            ? "中面包车"
            : msg.journey_msg.car == 2
            ? "大面包车"
            : msg.journey_msg.car == 3
            ? "中型货车"
            : msg.journey_msg.car == 4
            ? "半挂"
            : "其他载具"
        }}）{{ msg.journey_msg.journey_start }}-->{{
          msg.journey_msg.journey_end
        }}</span
      >
      <span class="time">{{ msg.journey_msg.time }}</span>
    </div>
    <div class="money flex">
      <span class="m">￥{{ msg.money }}</span>
      <span class="details">订单详情></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: Object,
      default: () => ({
        status: {
          st_1: 0, //0即时；1预约
          st_2: 0, //0新的；1代运；2进行中；3已完成；4已取消，
          st_3: 0, //0待抢；1没有
          time: "2017年9月10日",
        },
        journey_msg: {
          car: 1, //0小面包车；1中面包车；2大面包车；3中型货车；4半挂；5其他载具
          journey_start: "积玉桥",
          journey_end: "大梁庄2",
          time: "上午10:20",
        },
        money: 130,
      }),
    },
    view: {
      type: String,
      default: "default",
    },
  },
  computed: {},
  methods: {
    coclick() {
      let url = "";
      if (this.view == "default") {
        url = "/driver_indent";
      } else if (this.view == "record") {
        url = "/driver_indent2";
      }
      this.$router.push(url);
    },
  },
};
</script>